<!--
    * Time    : 2021-02-22 09:10:01
    * Author  : zhangTj
    * Desc    : 该组件用于局部加载时使用，并不会占据整个页面，只会占据局部
-->
<template>
    <div v-if="value">
        <div style="padding: 1rem" :style="{ background: backgroundColor }">
            <div class="flex-center" :style="{ height: height }">
                <van-loading v-bind="$attrs" vertical>{{ loadingText }}</van-loading>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean
        },
        height: {
            type: String,
            default: 'auto'
        },
        loadingText: {
            type: String,
            default: '加载中...'
        },
        backgroundColor: {
            type: String,
            default: 'rgba(0, 0, 0, 0.2)'
        }
    },
    data() {
        return {}
    },
    methods: {
        // 切换显示状态
        toggleLoading() {
            this.value = !this.value
        }
    }
}
</script>
